<template>
  <div class="app-container profit-statistics">
    <!-- 头部区域：日期范围选择器和刷新按钮 -->
    <div class="header">
      <el-row type="flex" xs align="middle">
        <span class="date-picker-label">请选择查询日期：</span>
        <el-col class="date-range-col">
          <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="yyyy-MM-dd"
                  @change="fetchProfitData"
          ></el-date-picker>
        </el-col>
        <el-col class="button-col">
          <el-button type="primary" @click="fetchProfitData">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 利润统计表格 -->
    <div class="profit-table" v-if="profitData.length > 0">
      <el-table
              :data="profitData"
              style="width: 100%"
      >
        <el-table-column
                prop="productName"
                label="商品名称"
        ></el-table-column>
        <el-table-column
                prop="salesVolume"
                label="销量"
        ></el-table-column>
        <el-table-column
                prop="profit"
                label="利润"
                width="180"
        ></el-table-column>
      </el-table>
    </div>


    <!-- 无数据提示 -->
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script setup name="ProfitStatistics">
  import { ref, onMounted } from 'vue';
  import { ElDatePicker, ElRow, ElButton, ElTable, ElTableColumn, ElMessage } from 'element-plus';

  // 假设这是获取利润数据的API
  const totalProfitByMoth = (startDate, endDate) => {
    // 这里应该是API调用，返回一个Promise对象
    // 模拟数据
    return Promise.resolve([
      { productName: '商品A', salesVolume: 150, profit: 3000 },
      { productName: '商品B', salesVolume: 120, profit: 2400 },
      // 更多商品数据...
    ]);
  };

  const dateRange = ref([new Date(), new Date()]);
  const profitData = ref([]);

  onMounted(() => {
    fetchProfitData();
  });

  function fetchProfitData() {
    const [startDate, endDate] = dateRange.value;
    totalProfitByMoth(startDate, endDate).then(data => {
      profitData.value = data;
    }).catch(error => {
      ElMessage.error('获取数据失败，请稍后再试！');
    });

    // totalProfitByMoth(month).then(res => {
    //   profitData.value=res;
    // })
    // .catch(error => {
    //   console.error('获取数据失败，请稍后再试！')
    // })

  }
</script>


<style scoped lang="scss">
  $border-color: #ebeef5; // 定义边框颜色
  $text-color: #606266; // 定义文本颜色

  .app-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .selection-area {
    margin-bottom: 20px;
  }

  .date-picker-col {
    flex: 1;
    margin-right: 10px;
  }

  .button-col {
    flex: 0 0 auto; // 防止按钮宽度随屏幕变化
  }

  .table-container {
    margin-top: 20px;
  }

  .el-table {
    border: 1px solid $border-color;
    th, td {
      border-color: $border-color;
      color: $text-color;
    }
  }

  .no-data {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 16px;
  }
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }

  .app-container.profit-statistics {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .header {
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  .date-range-col {
    flex: 1;
    margin-right: 10px;
  }

  .button-col {
    flex: 0 0 auto;
  }

  .profit-table {
    margin-top: 20px;
  }

  .no-data {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 16px;
  }
</style>

